<template>
	<div class="container">
		<!-- 头部搜索区域 -->
		<div class="search">
			<el-form>
				<el-form-item>
					<el-button type="success" size="mini" @click="addMemberBox = true">添加会员</el-button>
				</el-form-item>
			</el-form>
			<el-form :inline="true">
				<el-form-item>
					<el-input placeholder="手机号/邮箱/会员昵称" size="mini" v-model="keyword"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="info" size="mini" @click="getMember">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-popover placement="bottom" title="高级搜索" trigger="click" style="width: 100%;">
						<el-form :inline="true" style="border-top: 1px solid #ddd;width: 100%;padding-top: 10px;">
							<el-form-item label="搜索内容">
								<el-input placeholder="手机号/邮箱/会员昵称" size="mini" v-model="keyword"></el-input>
							</el-form-item>
							<el-form-item label="会员等级">
								<el-select v-model="levelId" placeholder="请选择会员分类" size="mini">
									<el-option v-for="item in userlevel" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="info" size="mini" @click="getMember">搜索</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="success" size="mini" plain>清空筛选条件</el-button>
							</el-form-item>
						</el-form>
						<el-button type="success" slot="reference" size="mini" plain>高级搜索</el-button>
					</el-popover>
				</el-form-item>
			</el-form>
		</div>
		<!-- 用户列表区域 -->
		<el-table :data="userlist" border size="small">
			<el-table-column label="会员" align="center">
				<template slot-scope="scope">
					<div class="users">
						<div>
							<img :src="scope.row.avatar" style="width: 50px;height: 50px;" />
						</div>
						<div>
							<p>{{scope.row.username}}</p>
							<p>用户id: {{scope.row.id}}</p>
						</div>
						<div>
							<el-button type="text" size="mini">
								<span style="color: teal">详情</span>
							</el-button>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="会员等级" prop="user_level.name" align="center"></el-table-column>
			<el-table-column label="登录注册" align="center">
				<template slot-scope="scope">
					<p>注册时间：{{scope.row.create_time}}</p>
					<p>登录时间：{{scope.row.update_time}}</p>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-button type="success" plain size="mini" @click="updateStatus({id:scope.row.id,status:1})" v-show="scope.row.status == 1">启用</el-button>
					<el-button type="danger" plain size="mini" @click="updateStatus({id:scope.row.id,status:0})" v-show="scope.row.status == 0">禁用</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="mini" color="red" @click="editMember(scope.row)">
						<span style="color: teal">编辑</span>
					</el-button>
					<el-button type="text" size="mini" @click="removeMember(scope.row.id)">
						<span style="color: teal">删除</span>
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页器区域 -->
		<el-pagination
		  style="margin-top: 10px;"
		  @size-change="changeSize"
		  @current-change="changePage"
		  :current-page="page"
		  :page-sizes="[5, 10, 15, 20]"
		  :page-size="limit"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="totals">
		</el-pagination>
		
		<!-- 添加会员信息的弹框 -->
		<el-dialog title="添加会员" :visible.sync="addMemberBox">
		  <el-form :model="users" :rules="rules" ref="addMemForm" label-width="80px" class="addMem">
		    <el-form-item label="用户名" prop="username">
		      <el-input v-model="users.username" placeholder="请输入用户名" size="small"></el-input>
		    </el-form-item>
			<el-form-item label="密码" prop="password">
			  <el-input v-model="users.password" placeholder="请输入密码" size="small"></el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="nickname">
			  <el-input v-model="users.nickname" placeholder="请输入昵称" size="small"></el-input>
			</el-form-item>
			<el-form-item label="头像">
			  <div style="width: 80px;">
				  <el-button icon="el-icon-plus" @click="addHeadImgBox = true" v-if="users.avatar == ''"></el-button>
				  <el-image :src="users.avatar" v-else style="width: 60px;height: 60px;" @click="addHeadImgBox = true"/>
			  </div>
			</el-form-item>
			<el-form-item label="会员等级">
			  <el-select v-model="users.user_level_id" placeholder="请选择" size="mini" style="width: 240px;">
			  	<el-option v-for="item in userlevel" :key="item.id" :label="item.name" :value="item.id">
			  	</el-option>
			  </el-select>
			</el-form-item>
			<el-form-item label="手机" prop="phone">
			  <el-input v-model="users.phone" placeholder="请输入手机号" size="small"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
			  <el-input v-model="users.email" placeholder="请输入邮箱" size="small"></el-input>
			</el-form-item>
			<el-form-item label="状态">
			    <div>
			      <el-radio v-model="radio" label="1" border size="mini">启用</el-radio>
			      <el-radio v-model="radio" label="0" border size="mini">禁用</el-radio>
			    </div>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="addMemberBox = false" size="mini">取 消</el-button>
		    <el-button type="primary" size="mini" @click="addMember('addMemForm')">确 定</el-button>
		  </div>
		</el-dialog>
		
		<!-- 添加头像的弹框 -->
		<img_admin :addHeadImgBox="addHeadImgBox" @selectImage="selectImage" />
		
		<!-- 编辑会员信息的弹框 -->
		<el-dialog title="编辑会员" :visible.sync="editMemberBox">
		  <el-form :model="edit" :rules="rules" ref="addMemForm" label-width="80px" class="addMem">
		    <el-form-item label="用户名">
		      <el-input v-model="edit.username" placeholder="请输入用户名" size="small"></el-input>
		    </el-form-item>
			<el-form-item label="密码">
			  <el-input v-model="edit.password" placeholder="请输入密码" size="small"></el-input>
			</el-form-item>
			<el-form-item label="昵称">
			  <el-input v-model="edit.nickname" placeholder="请输入昵称" size="small"></el-input>
			</el-form-item>
			<el-form-item label="头像">
			  <div style="width: 80px;">
				  <el-button icon="el-icon-plus" v-if="edit.avatar == ''"></el-button>
				  <el-image :src="edit.avatar" v-else style="width: 60px;height: 60px;" @click="addHeadImgBox = true"/>
			  </div>
			</el-form-item>
			<el-form-item label="会员等级">
			  <el-select v-model="edit.user_level_id" placeholder="请选择" size="mini" style="width: 240px;">
			  	<el-option v-for="item in userlevel" :key="item.id" :label="item.name" :value="item.id">
			  	</el-option>
			  </el-select>
			</el-form-item>
			<el-form-item label="手机">
			  <el-input v-model="edit.phone" placeholder="请输入手机号" size="small"></el-input>
			</el-form-item>
			<el-form-item label="邮箱">
			  <el-input v-model="edit.email" placeholder="请输入邮箱" size="small"></el-input>
			</el-form-item>
			<el-form-item label="状态">
			    <div>
			      <el-radio v-model="radio" label="1" border size="mini">启用</el-radio>
			      <el-radio v-model="radio" label="0" border size="mini">禁用</el-radio>
			    </div>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="editMemberBox = false" size="mini">取 消</el-button>
		    <el-button type="primary" size="mini" @click="saveMenber">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
import img_admin from "../common/imgAdmin.vue"
export default {
	props: [],
	components: {img_admin},
	data() {
		return {
			keyword: "", // 搜索的关键字
			page: 1, // 当前页数
			limit: 5, // 每页形式的条数
			totals: 0, // 总条数
			levelId: "", // 等级ID 
			userlist: [], // 会员列表数据
			userlevel: [], // 会员等级数据
			// 添加会员必备参数
			users: {
				username: "",
				password: "",
				nickname: "",
				avatar: "",
				user_level_id: "",
				phone: "",
				email: "",
				status: ""
			},
			addMemberBox: false, // 控制添加会员的弹框
			addHeadImgBox: false, // 控制添加头像的弹框
			// 状态
			radio: "",
			// 编辑会员信息的必备参数
			edit: {
				id: "",
				username: "",
				password: "",
				nickname: "",
				avatar: "",
				user_level_id: "",
				phone: "",
				email: "",
				status: ""
			},
			editMemberBox: false, // 控制编辑会员的弹框
			// 验证规则
			rules: {
				username: [
					 { required: true, message: '请输入用户名', trigger: 'blur' },
					 // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				nickname: [
					{ required: true, message: '请输入昵称', trigger: 'blur' }
				],
				phone: [
					{ required: true, message: '请输入手机号', trigger: 'blur' }
				],
				email: [
					{ required: true, message: '请输入邮箱', trigger: 'blur' }
				],
			}
		};
	},
	created() {

	},
	mounted() {
		// 获取会员列表的数据
		this.getMember();
	},
	methods: {
		// 获取会员列表的数据
		getMember() {
			this.$axios.get(`/api/admin/user/${this.page}?limit=${this.limit}&keyword=${this.keyword}&user_level_id=`).then(res => {
				console.log(res);
				// 用户列表数据
				this.userlist = res.data.list;
				// 用户等级数据
				this.userlevel = res.data.user_level;
				// 总条数
				this.totals = res.data.totalCount;
			})
		},
		// 添加会员信息的操作
		addMember() {
			this.$axios.post("/api/admin/user",this.users).then(res => {
				console.log(res);
				this.$message.success("添加成功");
				this.getMember();
				this.addMemberBox = false;
			}).catch(error => {
				this.$message.error(error.response.data.msg);
			})
		},
		// 编辑会员信息的操作
		editMember(row) {
			console.log(row);
			this.edit = row;
			this.editMemberBox = true;
		},
		// 保存编辑好的会员信息
		saveMenber() {
			this.$axios.post(`/api/admin/user/${this.edit.id}`,this.edit).then(res => {
				console.log(res);
				this.$message.success("修改成功");
				this.getMember();
				this.editMemberBox = false;
			}).catch(error => {
				this.$message.error(error.response.data.msg)
			})
		},
		// 删除会员的操作
		removeMember(id) {
			this.$confirm("您确定要删除该会员吗?","提示", {
				confirmButtonText: '确定删除',
				cancelButtonText: '再想想',
				type: 'warning'
			}).then(() => {
				// 请求删除的接口
				this.$axios.post(`/api/admin/user/${id}/delete`).then(res => {
					console.log(res);
					// 成功提示
					this.$message.success("删除成功");
					this.getMember();
				})
			}).catch(() => {
				// 取消的操作
				this.$message.error("您已经取消了删除的操作")
			})
		},
		// 修改会员的状态
		updateStatus({id,status}) {
			console.log(id,status);
			// 请求会员状态的接口
			this.$axios.post(`/api/admin/user/${id}/update_status`,{status:status}).then(res => {
				console.log(res)
				this.$message.success("更新成功");
				this.getMember();
			}).catch(error => {
				this.$message.error(error.response.data.msg)
			})
		},
		// 分页的操作
		changeSize(size) {
			this.limit = size;
			this.getMember();
		},
		changePage(page) {
			this.page = page;
			this.getMember();
		},
		// 点击图片选中并添加
		selectImage(url) {
			// console.log(url);
			this.users.avatar = url;
			this.edit.avatar = url;
			this.addHeadImgBox = false;
		},
		// 点击图片选中并添加到编辑弹框中
		// editSelect(url) {
			
		// }
	},
	computed: {

	},
	watch: {

	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;

	.search {
		width: 100%;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.users {
		display: flex;
		justify-content: space-between;
		align-items: center;

		p {
			margin: 0px;
			padding: 0px;
		}
	}
	.el-upload {
		border: 1px solid #ddd;
	}
	.addMem {
		width: 40% !important;
	}
}
</style>
